import { IconDoubleChevronRight } from '@douyinfe/semi-icons';
import { Card, Tooltip, Button } from '@douyinfe/semi-ui';
import { TreeNodeData } from '@douyinfe/semi-ui/lib/es/tree';
import UserSiderTree from './tree';

const UserSiderCard = ({ onHide }: { onHide: () => void }) => {
  return (
    <Card
      bordered={false}
      className='w-1/6 p-0.5 rounded-lg bg-gradient-to-br from-indigo-500 via-purple-500 to-pink-500'
      bodyStyle={{
        padding: 0,
        position: 'relative',
        zIndex: '10',
        background: '#fff',
        borderBottomLeftRadius: '0.375rem',
        borderBottomRightRadius: '0.375rem',
      }}
      headerStyle={{
        // position: 'relative',
        // zIndex: '10',
        // background: '#fff',
        color: '#fff',
        borderTopLeftRadius: '0.375rem',
        borderTopRightRadius: '0.375rem',
      }}
      headerLine={false}
      title={
        <div className='flex justify-between items-center'>
          <span>部门列表</span>

          <Tooltip content='隐藏'>
            <span className='inline-block'>
              <Button
                className='!text-white bg-black/10 hover:!bg-black/20'
                icon={<IconDoubleChevronRight />}
                onClick={onHide}
              />
            </span>
          </Tooltip>
        </div>
      }>
      <UserSiderTree
        onSelectItem={(_: string, __: boolean, data: TreeNodeData) => {
          console.log(data.id);
        }}
      />
    </Card>
  );
};

export default UserSiderCard;
